<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-3">
        <h2>{{ 'WELCOME' | translate }}</h2>
        <small>{{ 'MESSAGEINFO' | translate }}</small>
        <ul class="list-group clear-list m-t">
            <li class="list-group-item fist-item">
                                <span class="pull-right">
                                    09:00 pm
                                </span>
                <span class="label label-success">1</span> Please contact me
            </li>
            <li class="list-group-item">
                                <span class="pull-right">
                                    10:16 am
                                </span>
                <span class="label label-info">2</span> Sign a contract
            </li>
            <li class="list-group-item">
                                <span class="pull-right">
                                    08:22 pm
                                </span>
                <span class="label label-primary">3</span> Open new shop
            </li>
            <li class="list-group-item">
                                <span class="pull-right">
                                    11:06 pm
                                </span>
                <span class="label label-default">4</span> Call back to Sylvia
            </li>
            <li class="list-group-item">
                                <span class="pull-right">
                                    12:00 am
                                </span>
                <span class="label label-primary">5</span> Write a letter to Sandra
            </li>
        </ul>
    </div>
    <div class="col-sm-6">
        <div class="flot-chart dashboard-chart" ng-controller="dashboardFlotOne as chart">
            <div flot class="flot-chart-content" dataset="chart.flotData" options="chart.flotOptions"></div>
        </div>
        <div class="row text-left">
            <div class="col-xs-4">
                <div class=" m-l-md">
                    <span class="h4 font-bold m-t block">$ 406,100</span>
                    <small class="text-muted m-b block">Sales marketing report</small>
                </div>
            </div>
            <div class="col-xs-4">
                <span class="h4 font-bold m-t block">$ 150,401</span>
                <small class="text-muted m-b block">Annual sales revenue</small>
            </div>
            <div class="col-xs-4">
                <span class="h4 font-bold m-t block">$ 16,822</span>
                <small class="text-muted m-b block">Half-year revenue margin</small>
            </div>

        </div>
    </div>
    <div class="col-sm-3">
        <div class="statistic-box">
            <h4>
                Project Beta progress
            </h4>

            <p>
                You have two project with not compleated task.
            </p>

            <div class="row text-center" ng-controller="chartJsCtrl as chart">
                <div class="col-lg-6" >
                        <canvas polarchart options="chart.polarOptions" data="chart.polarData" width="80" height="80"></canvas>
                    <h5>Kolter</h5>
                </div>
                <div class="col-lg-6">
                        <canvas doughnutchart options="chart.doughnutOptions" data="chart.doughnutData" width="78" height="78"></canvas>
                    <h5>Maxtor</h5>
                </div>
            </div>
            <div class="m-t">
                <small>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</small>
            </div>

        </div>
    </div>

</div>
<div class="row">
<div class="col-lg-12">
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>New data for the report</h5> <span class="label label-primary">IN+</span>
            <div ibox-tools></div>
        </div>
        <div class="ibox-content">
            <div>

                <div class="pull-right text-right">
                    <bar-chart data="main.BarChart.data" options="main.BarChart.options"></bar-chart>
                    <br/>
                    <small class="font-bold">$ 20 054.43</small>
                </div>
                <h4>NYS report new data!
                    <br/>
                    <small class="m-r"><a ui-sref="flot_chart"> Check the stock price! </a></small>
                </h4>
            </div>
        </div>
    </div>
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Read below comments and tweets</h5>
            <div ibox-tools></div>
        </div>
        <div class="ibox-content no-padding">
            <ul class="list-group">
                <li class="list-group-item">
                    <p><a class="text-info" href="">@Alan Marry</a> I belive that. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <small class="block text-muted"><i class="fa fa-clock-o"></i> 1 minuts ago</small>
                </li>
                <li class="list-group-item">
                    <p><a class="text-info" href="">@Stock Man</a> Check this stock chart. This price is crazy! </p>

                    <div class="text-center m">
                        <span id="sparkline8"></span>
                    </div>
                    <small class="block text-muted"><i class="fa fa-clock-o"></i> 2 hours ago</small>
                </li>
                <li class="list-group-item">
                    <p><a class="text-info" href="">@Kevin Smith</a> Lorem ipsum unknown printer took a galley </p>
                    <small class="block text-muted"><i class="fa fa-clock-o"></i> 2 minuts ago</small>
                </li>
                <li class="list-group-item ">
                    <p><a class="text-info" href="">@Jonathan Febrick</a> The standard chunk of Lorem Ipsum</p>
                    <small class="block text-muted"><i class="fa fa-clock-o"></i> 1 hour ago</small>
                </li>
                <li class="list-group-item">
                    <p><a class="text-info" href="">@Alan Marry</a> I belive that. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <small class="block text-muted"><i class="fa fa-clock-o"></i> 1 minuts ago</small>
                </li>
                <li class="list-group-item">
                    <p><a class="text-info" href="">@Kevin Smith</a> Lorem ipsum unknown printer took a galley </p>
                    <small class="block text-muted"><i class="fa fa-clock-o"></i> 2 minuts ago</small>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="col-lg-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Your daily feed</h5>

            <!-- This is example of local custom ibox tools -->
            <div class="ibox-tools">
                <span class="label label-warning-light">10 Messages</span>
            </div>
        </div>
        <div class="ibox-content">

            <div>
                <div class="feed-activity-list">

                    <div class="feed-element">
                        <a ui-sref="profile" class="pull-left">
                            <img alt="image" class="img-circle" src="img/profile.jpg">
                        </a>

                        <div class="media-body ">
                            <small class="pull-right">5m ago</small>
                            <strong>Monica Smith</strong> posted a new blog. <br>
                            <small class="text-muted">Today 5:60 pm - 12.06.2014</small>

                        </div>
                    </div>

                    <div class="feed-element">
                        <a ui-sref="profile" class="pull-left">
                            <img alt="image" class="img-circle" src="img/a2.jpg">
                        </a>

                        <div class="media-body ">
                            <small class="pull-right">2h ago</small>
                            <strong>Mark Johnson</strong> posted message on <strong>Monica Smith</strong> site. <br>
                            <small class="text-muted">Today 2:10 pm - 12.06.2014</small>
                        </div>
                    </div>
                    <div class="feed-element">
                        <a ui-sref="profile" class="pull-left">
                            <img alt="image" class="img-circle" src="img/a3.jpg">
                        </a>

                        <div class="media-body ">
                            <small class="pull-right">2h ago</small>
                            <strong>Janet Rosowski</strong> add 1 photo on <strong>Monica Smith</strong>. <br>
                            <small class="text-muted">2 days ago at 8:30am</small>
                        </div>
                    </div>
                    <div class="feed-element">
                        <a ui-sref="profile" class="pull-left">
                            <img alt="image" class="img-circle" src="img/a4.jpg">
                        </a>

                        <div class="media-body ">
                            <small class="pull-right text-navy">5h ago</small>
                            <strong>Chris Johnatan Overtunk</strong> started following <strong>Monica Smith</strong>. <br>
                            <small class="text-muted">Yesterday 1:21 pm - 11.06.2014</small>
                            <div class="actions">
                                <a class="btn btn-xs btn-white"><i class="fa fa-thumbs-up"></i> Like </a>
                                <a class="btn btn-xs btn-white"><i class="fa fa-heart"></i> Love</a>
                            </div>
                        </div>
                    </div>
                    <div class="feed-element">
                        <a ui-sref="profile" class="pull-left">
                            <img alt="image" class="img-circle" src="img/a5.jpg">
                        </a>

                        <div class="media-body ">
                            <small class="pull-right">2h ago</small>
                            <strong>Kim Smith</strong> posted message on <strong>Monica Smith</strong> site. <br>
                            <small class="text-muted">Yesterday 5:20 pm - 12.06.2014</small>
                            <div class="well">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                                Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                            </div>
                            <div class="pull-right">
                                <a class="btn btn-xs btn-white"><i class="fa fa-thumbs-up"></i> Like </a>
                            </div>
                        </div>
                    </div>
                    <div class="feed-element">
                        <a ui-sref="profile" class="pull-left">
                            <img alt="image" class="img-circle" src="img/profile.jpg">
                        </a>

                        <div class="media-body ">
                            <small class="pull-right">23h ago</small>
                            <strong>Monica Smith</strong> love <strong>Kim Smith</strong>. <br>
                            <small class="text-muted">2 days ago at 2:30 am - 11.06.2014</small>
                        </div>
                    </div>
                    <div class="feed-element">
                        <a ui-sref="profile" class="pull-left">
                            <img alt="image" class="img-circle" src="img/a7.jpg">
                        </a>

                        <div class="media-body ">
                            <small class="pull-right">46h ago</small>
                            <strong>Mike Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
                            <small class="text-muted">3 days ago at 7:58 pm - 10.06.2014</small>
                        </div>
                    </div>
                </div>

                <button class="btn btn-primary btn-block m-t"><i class="fa fa-arrow-down"></i> Show More</button>

            </div>

        </div>
    </div>

</div>
<div class="col-lg-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Alpha project</h5>
            <div ibox-tools></div>
        </div>
        <div class="ibox-content ibox-heading">
            <h3>You have meeting today!</h3>
            <small><i class="fa fa-map-marker"></i> Meeting is on 6:00am. Check your schedule to see detail.</small>
        </div>
        <div class="ibox-content inspinia-timeline">

            <div class="timeline-item">
                <div class="row">
                    <div class="col-xs-3 date">
                        <i class="fa fa-briefcase"></i>
                        6:00 am
                        <br/>
                        <small class="text-navy">2 hour ago</small>
                    </div>
                    <div class="col-xs-7 content no-top-border">
                        <p class="m-b-xs"><strong>Meeting</strong></p>

                        <p>Conference on the sales results for the previous year. Monica please examine sales trends in marketing and products. Below please find the current status of the
                            sale.</p>

                        <p><line-chart data="main.LineChart.data" options="main.LineChart.options"></line-chart></p>
                    </div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="row">
                    <div class="col-xs-3 date">
                        <i class="fa fa-file-text"></i>
                        7:00 am
                        <br/>
                        <small class="text-navy">3 hour ago</small>
                    </div>
                    <div class="col-xs-7 content">
                        <p class="m-b-xs"><strong>Send documents to Mike</strong></p>

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
                    </div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="row">
                    <div class="col-xs-3 date">
                        <i class="fa fa-coffee"></i>
                        8:00 am
                        <br/>
                    </div>
                    <div class="col-xs-7 content">
                        <p class="m-b-xs"><strong>Coffee Break</strong></p>

                        <p>
                            Go to shop and find some products.
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.
                        </p>
                    </div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="row">
                    <div class="col-xs-3 date">
                        <i class="fa fa-phone"></i>
                        11:00 am
                        <br/>
                        <small class="text-navy">21 hour ago</small>
                    </div>
                    <div class="col-xs-7 content">
                        <p class="m-b-xs"><strong>Phone with Jeronimo</strong></p>

                        <p>
                            Lorem Ipsum has been the industry's standard dummy text ever since.
                        </p>
                    </div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="row">
                    <div class="col-xs-3 date">
                        <i class="fa fa-user-md"></i>
                        09:00 pm
                        <br/>
                        <small>21 hour ago</small>
                    </div>
                    <div class="col-xs-7 content">
                        <p class="m-b-xs"><strong>Go to the doctor dr Smith</strong></p>

                        <p>
                            Find some issue and go to doctor.
                        </p>
                    </div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="row">
                    <div class="col-xs-3 date">
                        <i class="fa fa-comments"></i>
                        12:50 pm
                        <br/>
                        <small class="text-navy">48 hour ago</small>
                    </div>
                    <div class="col-xs-7 content">
                        <p class="m-b-xs"><strong>Chat with Monica and Sandra</strong></p>

                        <p>
                            Web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

</div>
</div>

</div>

</div>
<div class="small-chat-box ng-small-chat fadeInRight animated" ng-show="openChat">

    <div class="heading" draggable="true">
        <small class="chat-date pull-right">
            02.19.2015
        </small>
        Small chat
    </div>

    <div class="content" chat-slim-scroll>

        <div class="left">
            <div class="author-name">
                Monica Jackson <small class="chat-date">
                10:02 am
            </small>
            </div>
            <div class="chat-message active">
                Lorem Ipsum is simply dummy text input.
            </div>

        </div>
        <div class="right">
            <div class="author-name">
                Mick Smith
                <small class="chat-date">
                    11:24 am
                </small>
            </div>
            <div class="chat-message">
                Lorem Ipsum is simpl.
            </div>
        </div>
        <div class="left">
            <div class="author-name">
                Alice Novak
                <small class="chat-date">
                    08:45 pm
                </small>
            </div>
            <div class="chat-message active">
                Check this stock char.
            </div>
        </div>
        <div class="right">
            <div class="author-name">
                Anna Lamson
                <small class="chat-date">
                    11:24 am
                </small>
            </div>
            <div class="chat-message">
                The standard chunk of Lorem Ipsum
            </div>
        </div>
        <div class="left">
            <div class="author-name">
                Mick Lane
                <small class="chat-date">
                    08:45 pm
                </small>
            </div>
            <div class="chat-message active">
                I belive that. Lorem Ipsum is simply dummy text.
            </div>
        </div>


    </div>
    <div class="form-chat">
        <div class="input-group input-group-sm"><input type="text" class="form-control"> <span class="input-group-btn"> <button
                class="btn btn-primary" type="button">Send
        </button> </span></div>
    </div>

</div>
<div id="small-chat" ng-click="openChat = !openChat">

    <span class="badge badge-warning pull-right">5</span>
    <a class="open-small-chat">
        <i class="fa fa-comments"></i>

    </a>
</div>
